import { Color, Matrix4, Vector3, Quaternion } from 'https://unpkg.com/three/build/three.module.js';
import { initShaders, ScaleLinear, imgPromise } from '../jsm/Utils.js';
import lib from '../jsm/ThreeLib.js';
import Poly from '../jsm/Poly3.js'
import Sky from '../jsm/Sky.js'
import ShapeGeo from '../jsm/ShapeGeo.js';
import ImageJump from '../jsm/ImageJump.js'

window.onload = function () {

    const canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;


    const gl = canvas.getContext("webgl");
    // //开启颜色合成,才会有透明度的感觉
    // gl.enable(gl.BLEND);
    // gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
    // //开始背景遮挡
    gl.enable(gl.DEPTH_TEST);

    //初始化着色器
    initShaders(gl,
        document.querySelector("#vertexShader1").innerText,
        document.querySelector("#fragmentShader1").innerText);
    lib.clearCanvas(gl, new Color("rgba(255,255,255,1)"), 1);


    // 顶点映射
    var a = 0.5;
    let arr = [
        -a, a, -a,
        -a, a, a,
        a, a, a,
        a, a, -a,

        -a, -a, -a,
        -a, -a, a,
        a, -a, a,
        a, -a, -a,
    ];

    let lines = [
        0, 1,
        1, 2,
        2, 3,
        3, 0,

        4, 5,
        5, 6,
        6, 7,
        7, 4,

        0, 4,
        1, 5,
        2, 6,
        3, 7,
    ];

    let retArr = [];

    for (let i = 0; i < lines.length; i += 2) {

        let index = lines[i] * 3;
        retArr.push(
            arr[index + 0],
            arr[index + 1],
            arr[index + 2],
        );
        retArr.push(10);
        index = lines[i + 1] * 3;
        retArr.push(
            arr[index + 0],
            arr[index + 1],
            arr[index + 2],
        );
        retArr.push(10);
    }




    var u_Vm4 = new Matrix4();

    let poly = new Poly({
        gl: gl,
        arr: retArr,
        list: [
            { name: 'a_Position', size: 3, beginIndex: 0 },
            { name: 'a_PointSize', size: 1, beginIndex: 3 },
        ],
        uniforms: {
            'u_Vm4': {
                type: 'uniformMatrix4fv',
                value: u_Vm4.elements
            }
        }
    });

    poly.draw(["LINES"])



    let m4x = new Matrix4().makeRotationX(0.01);
    let m4y = new Matrix4().makeRotationY(0.01);
    let m4z = new Matrix4().makeRotationZ(0.01);
    (function ani() {
        u_Vm4.multiply(m4x).multiply(m4y).multiply(m4z);

        poly.uniforms['u_Vm4'].value = u_Vm4.elements;
        poly.updateUniform();
        poly.draw(["LINES"]);
        requestAnimationFrame(ani)
    })();

};
